<template>
  <el-card class="facility-display">
    <el-skeleton :rows="13" animated :loading="loading">
      <div class="title">
        <el-button
          type="primary"
          size="default"
          @click="handleClickBtn"
          class="btn"
          >上传视频</el-button
        >设备视频展示
      </div>
      <el-row :gutter="20" class="video-line">
        <el-col
          v-for="(play, index) in player"
          :key="index"
          :span="12"
          :offset="0"
          style="padding-top: 5px"
        >
          <video-player :options="player[index]" controls style="width: 500px">
          </video-player>
        </el-col>
      </el-row>
    </el-skeleton>
  </el-card>
  <Test
    v-model="visibilityBinding"
    v-if="visibilityBinding"
    @initGetVideos="initGetVideos"
  />
</template>

<script setup>
import { onMounted, ref } from 'vue'
import Test from './components/test.vue'
import { acquireVideoUrl } from '@/api/facility.js'
import { ElMessage } from 'element-plus/lib/components'
import cloneDeep from 'lodash/cloneDeep'
const visibilityBinding = ref(false)

const loading = ref(true)

// 播放器数组里放的播放器的配置信息
const player = ref([])

const playerOptions = ref({
  //播放速度
  playbackRates: [0.5, 1.0, 1.5, 2.0],
  //如果true,浏览器准备好时开始回放。
  autoplay: false,
  // 默认情况下将会消除任何音频。
  muted: false,
  // 导致视频一结束就重新开始。
  loop: false,
  // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  preload: 'auto',
  language: 'zh-CN',
  // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  aspectRatio: '16:9',
  // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  fluid: true,
  sources: [
    /*  {
      //类型
      type: 'video/mp4',
      //url地址 本地方式
      // src: require('@/assets/video/第二章 进程管理1.mp4')
      src: ''
    } */
  ],
  //你的封面地址
  poster: require('@/assets/background.jpg'),
  //允许覆盖Video.js无法播放媒体源时显示的默认信息。
  notSupportedMessage: '此视频暂无法播放，请稍后再试'
})

const initGetVideos = async () => {
  // 获取视频资源列表
  try {
    const res = await acquireVideoUrl()
    loading.value = false
    player.value = []
    res.data.forEach((item) => {
      // console.log(item)
      const newPlayerOptions = cloneDeep(playerOptions.value)
      newPlayerOptions.sources.push(item)
      // console.log(newPlayerOptions)
      player.value.push(newPlayerOptions)
    })
    // console.log(res)
  } catch (error) {
    ElMessage.error(error)
  }
}

onMounted(() => {
  initGetVideos()
})

const handleClickBtn = () => {
  visibilityBinding.value = true
}
</script>

<style lang="scss" scoped>
@media screen and (max-width: 1297px) {
  .video-line {
    flex-direction: column;
    :deep(.el-col-12) {
      max-width: 100%;
    }
    // width: 500px;
    // height: 225px;
  }
}
.facility-display {
  text-align: center;
  // height: 555px;
  .title {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
    position: relative;
    .btn {
      position: absolute;
      left: 0;
    }
  }
  .display {
    padding: 5px;
    width: 230px;
    height: 230px;
  }
  .video-line {
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    :deep(.el-col-12) {
      flex: initial;
    }
  }
}
</style>
